<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { list } from "@/api/sync_log";

const loading = ref(true);
const dataList = ref([]);

const columns = [
  {
    label: "同步日期",
    prop: "date"
  },
  {
    label: "同步总数",
    prop: "total_num"
  },
  {
    label: "同步成功数",
    prop: "success_num"
  },
  {
    label: "同步失败数",
    prop: "error_num"
  },
  {
    label: "状态",
    slot: "status"
  },
  {
    label: "类型",
    slot: "type"
  }
];

const pagination = ref({
  total: 0,
  pageSize: 20,
  currentPage: 1,
  background: true
});

// 获取列表数据
const getList = async () => {
  loading.value = true;
  try {
    const { data } = await list({
      page: pagination.value.currentPage,
      limit: pagination.value.pageSize
    });
    dataList.value = data.list;
    pagination.value.total = data.total;
  } catch (error) {
    console.error(error);
  }
  loading.value = false;
};

// 页码改变
const handleCurrentChange = (val: number) => {
  pagination.value.currentPage = val;
  getList();
};

// 每页条数改变
const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val;
  getList();
};

// 添加下载方法
const handleDownload = async (url: string, filename: string) => {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const blobUrl = window.URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = blobUrl;
    link.download = filename;
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error("下载失败:", error);
  }
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="main">
    <pure-table
      align-whole="center"
      showOverflowTooltip
      table-layout="auto"
      :loading="loading"
      :size="'default'"
      :data="dataList"
      :columns="columns"
      :pagination="pagination"
      :paginationSmall="false"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      @page-size-change="handleSizeChange"
      @page-current-change="handleCurrentChange"
    >
      <template #status="{ row, index }">
        <el-tag v-if="row.status == 0" type="info">待执行</el-tag>
        <el-tag v-else-if="row.status == 1" type="primary">执行中</el-tag>
        <el-tag v-else-if="row.status == 2" type="success">执行完成</el-tag>
      </template>
      <template #type="{ row }">
        <el-tag v-if="row.type == 1" type="primary">定时执行</el-tag>
        <el-tag v-else-if="row.type == 2" type="success">立即执行</el-tag>
      </template>

      <template #err_file="{ row }">
        <el-button
          v-if="row.err_file"
          text
          type="primary"
          @click="handleDownload(row.err_file, '导入错误文件.txt')"
        >
          下载
        </el-button>
      </template>
    </pure-table>
  </div>
</template>

<style scoped>
.main {
  margin: 10px;
}
</style>
